<form id="current-teams-form"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/addCurrentTeam"
      class="sky-form sky-form-modal" method="post" style="width: 650px">
    <header>Previous teams</header>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="team" placeholder="Team">
                </label>
            </section>
            <section class="col col-6">
                <label class="select">
                    <select name="country">
                        <option value="" selected disabled>Country</option>
                        <?php foreach ($this->countries as $country): ?>
                        <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>

        <section style="padding-left:0px">
            <label class="label">Start</label>
        </section>

        <section class="col col-3" style="padding-left:0px">
            <label class="select">
                <select name="cMonth">
                    <option value="" selected disabled>Month</option>
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                    <option value="3">Mar</option>
                    <option value="4">Apr</option>
                    <option value="5">May</option>
                    <option value="6">Jun</option>
                    <option value="7">Jul</option>
                    <option value="8">Aug</option>
                    <option value="9">Sep</option>
                    <option value="10">Oct</option>
                    <option value="11">Nov</option>
                    <option value="12">Dec</option>
                </select>
                <i></i>
            </label>
        </section>

        <section class="col col-3">
            <label class="select">
                <select name="cYear">
                    <option value="" selected disabled>Year</option>
                    <option value="1">2013</option>
                    <option value="2">2014</option>
                    <option value="3">2015</option>
                    <option value="4">2016</option>
                    <option value="5">2017</option>
                    <option value="6">2018</option>
                </select>
                <i></i>
            </label>
        </section>

    </fieldset>

    <footer>
        <button type="submit" class="button">Add</button>
        <a href="#" id="btnClose" target="current-teams-form" class="button button-secondary modal-closer">Close</a>

        <div class="progress"></div>
    </footer>
</form>

<script type="text/javascript">
    $(function () {
        $("#current-teams-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        team:{
                            required:true
                        },
                        country:{
                            required:true
                        },
                        cMonth:{
                            required:true
                        },
                        cYear:{
                            required:true
                        }
                    },

                    // Messages for form validation
                    messages:{
                        team:{
                            required:'Please enter your team'
                        },
                        country:{
                            required:'Please enter country'
                        },
                        cMonth:{
                            required:'Please enter start month'
                        },
                        cYear:{
                            required:'Please enter start year'
                        }
                    },

                    // Ajax form submit
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#current-teams-form button[type="submit"]').addClass('button-processing').attr('disabled', true);
                                    },
                                    success:function () {
                                        $('#current-teams-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');
                                        $('#btnClose').click();
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>